<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>项目规划</title>
		<link href="../css/layui.css" rel="stylesheet" type="text/css" />
		<script src="./../layui.js"></script>
	</head>
	<style>
		html,body{
			width:100%;
			height:100%;
			font-size: 62.5%;
		}
		.wrapBox{
			width: 100%;
			height:100%;
		}
		.bannerBox{
			width:100%;
			height:6rem;
			line-height:6rem;
			display: flex;
			flex-direction: row;
			/* border:1px  solid  red; */
		}
		.layui-form{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.layui-form-item {
		    margin-bottom:0rem;
		}
		.layui-form-label{
			color: #fff;
			font-size:1.5rem;
		}
		.companyIcon{
			width: 2rem;
			height:2rem;
			display: inline-block;
			background: url(../images/taskPlan/gongsi.png);
			background-size:100% 100%;
			background-repeat: no-repeat;
			vertical-align: middle;
		}
		.spTxt{
			display: inline-block;
			vertical-align:middle;
		}
		.monthIcon{
			width: 2rem;
			height:2rem;
			display: inline-block;
			background: url(../images/taskPlan/firstYFIcon.png);
			background-size:100% 100%;
			background-repeat: no-repeat;
			vertical-align: middle;
		}
		.layui-input, .layui-select, .layui-textarea {
		    
		    background: rgba(73, 133, 251, 0);
		    border: 1px solid #5377ED;
		    box-shadow: 0px 0px 10px 0px #0D44A9;
		    border-radius: 10px;
		}
		
		
		/*内容 */
		.task_content{
			width:100%;
			height:91%;
			display:flex;
			flex-direction: row;
			padding: 0  2rem;
			box-sizing: border-box;
			/* border: 1px  solid  red; */
		}
		/* aside */
		.left_itemBox{
			width: 18%;
			height: 100%;
			background: rgba(78, 129, 232, 0);
			box-shadow: 0px 0px 40px 0px rgba(89, 155, 255, 0.46) inset;
			border-radius: 10px;
			margin-right:1%;
		}
		.itemTitle{
			width:100%;
			height: 10rem;
			/* line-height: 10rem; */
			background: linear-gradient(90deg, #1153C1, #014FDF, #1153C1);
			border-radius: 10px 10px 0px 0px;
			display: flex;
			flex-direction:row;
		    text-align: center; 
		}
		.goBack{
			width:25%;
			height:100%;
			color: #fff;
            background: #4F86E8;
            border-radius: 8px 0px 0px 0px;
			cursor: pointer;
			/* vertical-align: middle; */
			display: flex;
			flex-direction:column;
		}
		.goBack span{
			text-align: center;
			vertical-align: middle;
		}
		.goBackIcon{
			width:3rem;
			height:3rem;
			display: inline-block;
			background: url(../images/taskPlan/homeIcon.png);
			background-size:100% 100%;
			background-repeat: no-repeat;
			vertical-align: middle;
			margin-top: 2.5rem;
		}
		.itemtitleTxt{
			width:75%;
			height:100%;
			font-size:2rem;
			color:#fff;	
			display: flex;
			align-items: center;	
		}
		.itemtitleTxt span{
			width: 100%;
			display: inline-block;
			text-align: center;	
		}  
		.itemList{
			width:auto;
			padding: 0rem 2rem;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
		}
		
		.itemList>span{
			width:100%;
			height:4.5rem;
			line-height:4.5rem;
			font-size:1.6rem;
			background: rgba(19, 32, 124, 0);
			border: 1px solid #103D7B;
			box-shadow: 0px 0px 40px 0px rgba(188, 215, 255, 0.2) inset;
			border-radius: 10px;
			margin-top: 2rem;
			text-align: center;
			color: #fff;
			cursor: pointer;
		}
		/* content */
		.right_itemBox{
			width:82%;
			height:100%;
			/* box-shadow: 0px 0px 40px 0px rgba(89, 155, 255, 0.46) inset; */
			/* border-radius: 10px; */
			
		}
        
		.itemActiveBg{
			border: 1px solid #8DB8FF !important;
			box-shadow: 0px 0px 40px 0px rgba(188, 215, 255, 0.46) inset !important;
		}
		input::-webkit-input-placeholder {
		    color: #fff;
		  }
		  input::-moz-input-placeholder {
			color: #fff;
		  }
		  input::-ms-input-placeholder {
			color: #fff;
		  }
		  
	</style>
	<body>
		<div class="wrapBox">
			<div class="bannerBox">
				<form class="layui-form" action="">
				  <div class="layui-form-item">
				    <label class="layui-form-label">
						<i class="companyIcon"></i>
						<span class="spTxt">公司</span>
				    </label>
				    <div class="layui-input-block">
					  <select name="city" lay-verify="required">
						<option value=""></option>
					  </select>
					</div>
				  </div>
				  <div class="layui-form-item">
						<label class="layui-form-label">
							<i class="monthIcon"></i>
							<span class="spTxt">月份</span>
					    </label>
						<div class="layui-input-inline">
						  <input type="text" name="date" id="monthData" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					    </div>
				  </div>	  
				</form>				
			</div>
			<div class="task_content">
				<div  class="left_itemBox">
					<div class="itemTitle">
						<div class="goBack">
							<span><i class="goBackIcon"></i></span>
							<span>返回首页</span>
						</div>
						<div class="itemtitleTxt">
							<span>项目规划</span>
						</div>
					</div>
					<div class="itemList">
						<span class="itemActiveBg" data-src="taskPlan.html">设备规划</span>
						<span>需求库</span>
						<span>三年规划库</span>
						<span data-src="taskYearPlan.html">年度计划库</span>
					</div>
					
				</div>   
				<div class="right_itemBox">
					 <iframe id="iframeBox" style = "width: 100%;height:100%" src="taskPlan.html" frameborder="0" scrolling ="no" class="layadmin-iframe" name="tree" id="homeIframe" ></iframe>
				</div>
				
			</div>
		    
		</div>
	</body>
	<script src="./../layui.js"></script>
	<script src="./../echarts/echarts.min.js"></script>
	<script src="./../index.js"></script>
	<script>
		
		console.log(layui)
	    layui.config({
	        base: ''
	    });
	    layui.use(['layer','form','element','laydate','tree'], function () {//,'element'
	        var layer = layui.layer
	            , element = layui.element
	            ,form = layui.form
	            , $ = layui.$
	            ,laydate = layui.laydate
				,tree = layui.tree
				
				  //日期
				  laydate.render({
				    elem: '#monthData'
				  });
				  
				$(".itemList>span").on("click",function(){
					 $(this).addClass("itemActiveBg").siblings().removeClass('itemActiveBg');
					 var  baseSrc = $(this).attr("data-src");
					 $("#iframeBox").attr("src",baseSrc);
				})
				
				$(".goBack").on("click",function(){
					 var  baseSrc = "taskPlan.html";
					 $("#iframeBox").attr("src",baseSrc);
				})	
				
	    });
	</script>
</html>

